<script setup lang="ts">
import { Popup, Button, Space, showNotify } from "vant";
import "@simonwep/pickr/dist/themes/monolith.min.css";
import Pickr from "@simonwep/pickr";
import { onMounted, reactive, nextTick } from "vue";
import axios from "axios";
import { useConfigStore } from "@/stores/models/config";
import { Loading } from "@/components/Overlay";

const configStore = useConfigStore();

const popupData = reactive<{
    visible: boolean;
    loading: boolean;
}>({
    visible: false,
    loading: false
});

let pickr: Pickr | null = null;

onMounted(() => [
    nextTick(() => {
        pickr = Pickr.create({
            el: "#color-pickr",
            theme: "monolith",
            inline: true,
            appClass: "custom-color-pickr",
            swatches: [
                "rgba(244, 67, 54, 1)",
                "rgba(233, 30, 99, 1)",
                "rgba(156, 39, 176, 1)",
                "rgba(103, 58, 183, 1)",
                "rgba(63, 81, 181, 1)",
                "rgba(33, 150, 243, 1)",
                "rgba(3, 169, 244, 1)",
                "rgba(0, 188, 212, 1)",
                "rgba(0, 150, 136, 1)",
                "rgba(76, 175, 80, 1)",
                "rgba(139, 195, 74, 1)",
                "rgba(205, 220, 57, 1)",
                "rgba(255, 235, 59, 1)",
                "rgba(255, 193, 7, 1)"
            ],
            useAsButton: true,
            lockOpacity: true,
            showAlways: true,

            components: {
                // Main components
                preview: true,
                opacity: false,
                hue: true,

                // Input / output Options
                interaction: {
                    hex: true,
                    rgba: true,
                    input: true
                }
            }
        });
    })
]);

const handleShow = (): void => {
    popupData.visible = true;
};

const handleConfirm = async (): Promise<void> => {
    if (pickr) {
        popupData.loading = true;
        const rgba = pickr.getColor().toRGBA();

        try {
            await axios({
                method: "post",
                url: `http://${configStore.device_ip}/set/rgb`,
                data: {
                    rgb: rgba.map((c) => Math.floor(c)).slice(0, 3)
                }
            });
            configStore.$patch({
                led: {
                    rgb: rgba.map((c) => Math.floor(c)).slice(0, 3)
                }
            });
            showNotify({ type: "success", message: "设置成功" });
            popupData.visible = false;
        } catch (error) {
            showNotify({ type: "danger", message: "设置失败" });
            console.log(error);
        } finally {
            popupData.loading = false;
        }
    }
};

const handleCancel = () => {
    popupData.visible = false;
};

defineExpose({ show: handleShow });
</script>
<template>
    <Popup
        v-model:show="popupData.visible"
        :z-index="10"
        :close-on-click-overlay="!popupData.loading"
        position="bottom"
        :lazy-render="false"
        class="color-picker-popup"
    >
        <div class="color-picker-popup-content">
            <div class="color-picke-popup-header">
                <span class="title">设置颜色</span>
                <Space>
                    <Button size="small" @click="handleCancel"> 取 消 </Button>
                    <Button size="small" type="primary" @click="handleConfirm"> 确 认 </Button>
                </Space>
            </div>
            <div id="color-pickr"></div>
        </div>
    </Popup>
    <Loading :show="popupData.loading" text="设置中..." />
</template>
<style lang="less">
.color-picker-popup {
    .color-picker-popup-content {
        height: 330px;
        display: flex;
        flex-direction: column;
        .color-picke-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.8rem;
            .title {
                font-size: 1.4rem;
                font-weight: 600;
            }
            .van-button {
                padding: 0 1rem;
            }
        }
        .custom-color-pickr {
            width: 100%;
            box-shadow: none;
            padding: 0.8rem;
            .pcr-selection {
                .pcr-color-palette {
                    height: 160px;
                }
            }
        }
    }
}
</style>
